
<style scoped="scoped">
.collectionCentre {
  width: 100%;
  overflow-x: hidden;
}

.collectionCentre .isShow {
  position: absolute;
  right: 5%;
  top: 10px;
  opacity: 0.8;
}
.bottom {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  background: #ececec;
  position: fixed;
  bottom: 0rem;
  padding-left: 3.5%;
  z-index: 100;
}

.settlement {
  color: white;
  font-size: 1.2rem;
  display: block;
  text-align: center;
  position: absolute;
  right: 3.5%;
  width: 30%;
  height: 3rem;
  background: orangered;
  top: 0;
}
#checkboxAll {
  transform: scale(1.3);
}

.box1 {
  padding-bottom: 5rem;
}

.item {
  width: 100%;
  height: 100%;
  background: white;
}

.item img {
  width: 100%;
  height: 80%;
}

.item h3 {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.57);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item span {
  color: red;
}
.checkboxItem {
  position: absolute;
  right: 5%;
  top: 5%;
  transform: scale(1.2);
}
</style>
<template>
  <div class="collectionCentre">
    <title-header :title="title" :back="true"></title-header>
    <span @click="show=!show" class="isShow">{{changeValue}}</span>

    <div class="bottom " v-if="show">
      <input id="checkboxAll" type="checkbox" v-model='checkboxAllCheck' @click="checkboxAll" /> 全选
      <div class="settlement" @click="deleteGood">删除</div>
    </div>

    <div class="box1">
      <grid :cols='2' class='padding0'>
        <grid-item :link="{name:'gooddetail',query:{Id:'12'}}" v-for="(value,index) in goodList" :key="index" style="" class="item">
          <input class="checkboxItem" type="checkbox" v-if="show" v-model="value.check" @click.stop="checkItem()" />
          <img :src="value.image" />
          <div class="content">
            <h3>{{value.name}}</h3>
            <span>{{value.price}}</span>
          </div>
        </grid-item>
      </grid>
    </div>
    <goodList ref='goodList'></goodList>

  </div>
</template>

<script>
import TitleHeader from "@/components/titleHeader.vue";
import GoodList from "@/components/goodList.vue";
import { Grid, GridItem } from "vux";
export default {
  components: {
    TitleHeader,
    GoodList,
    Grid,
    GridItem
  },
  data() {
    return {
      title: "收藏夹",
      show: false,
      checkboxAllCheck: false,
      goodList: [
        {
          id: 1,
          check: false,
          name: "小米 红米5",
          price: 5799.0,
          image:
            "http://img14.360buyimg.com/n1/s450x450_jfs/t16492/203/126997766/293977/d94fc6e1/5a28b64cN5583735a.jpg"
        },
        {
          id: 2,
          check: false,
          name: "sfs",
          price: 5678.0,
          image:
            "http://img14.360buyimg.com/n1/s450x450_jfs/t16492/203/126997766/293977/d94fc6e1/5a28b64cN5583735a.jpg"
        },
        {
          id: 3,
          check: false,
          name: "AWDA发送到的",
          price: 3445.0,
          image:
            "http://img14.360buyimg.com/n1/s450x450_jfs/t16492/203/126997766/293977/d94fc6e1/5a28b64cN5583735a.jpg"
        },
        {
          id: 4,
          check: false,
          name: "盎司的告诉对方",
          price: 123123.0,
          image:
            "http://img14.360buyimg.com/n1/s450x450_jfs/t16492/203/126997766/293977/d94fc6e1/5a28b64cN5583735a.jpg"
        }
      ]
    };
  },
  computed: {
    changeValue () {
      return !this.show ? "管理" : "完成";
    }
  },
  methods: {
    deleteGood () {
      const len = this.goodList.length;
      for (let i = len - 1; i >= 0; i--) {
        if (this.goodList[i].check) {
          this.goodList.splice(i, 1);
        }
      }
    },
    checkboxAll () {
      const len = this.goodList.length;
      this.$nextTick(() => {
        for (let i = len - 1; i >= 0; i--) {
          this.goodList[i].check = this.checkboxAllCheck;
        }
      });
    },
    init() {
      //  		this.$store.state.goodListData.then(data => {
      //		  		this.goodList=data;
      //		  		this.$refs.goodList.bindSticky()
      //		  	})
    },
    checkItem () {
      const len = this.goodList.length;
      this.checkboxAllCheck = true;
      this.$nextTick(() => {
        for (let i = len - 1; i >= 0; i--) {
          if (!this.goodList[i].check) {
            this.checkboxAllCheck = false;
          }
        }
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
